<template>
    <div class="column column--full article__footer">
        <div class="element element--article next-up">
            <div class="article__container">
                <figure class="article__figure">
                    <router-link
                        :to="{ name: 'NewDetail', params: { uuid: readNextData.uuid, author: readNextData.author } }"
                        class="figure__image">
                        <img :src="readNextData.imgUrl" v-if="readNextData.imgUrl">
                        <img src="../../../assets/noimg.png" v-else>
                    </router-link>
                </figure>
                <div class="article__content">
                    <header class="header header--secondary">
                        <h3 class="title">
                            <span class="label">Read Next</span>
                        </h3>
                    </header>
                    <h3 class="article__headline">
                        <router-link to="" class="link">
                            <span class="label--barrons">{{ readNextData.author }}</span>
                            {{ readNextData.title }}
                        </router-link>
                    </h3>
                    <p class="article__summary">{{ readNextData.summary }}</p>
                </div>
            </div>
        </div>
        <div class="element more-headlines">
            <header class="header">
                <h3 class="title">
                    <span class="label">More On Sinopoly Watch</span>
                </h3>
            </header>
            <ul class="list list--headlines">
                <li class="headline__item" v-for="item in moreWatchData" :key="item.uuid">
                    <router-link :to="{ name: 'NewDetail', params: { uuid: item.uuid, author: item.author } }"
                        class="link">
                        <span class="label--barrons" v-if="item.author">{{ item.author }}</span>
                        {{ item.title }}
                    </router-link>
                </li>
            </ul>
        </div>
    </div>
</template>
<script setup>
import homeRequest from "@/api/home.js";
import { useRouter } from 'vue-router'
const moreWatchData = ref([])
const readNextData = ref({})
const router = useRouter()
const props = defineProps(['detailsform'])
onMounted(() => {
    getNext()
})
const getNext = () => {
    let data = {
        uuid: props.detailsform.uuid,
        author: props.detailsform.author
    }
    homeRequest.getNextData(data).then((res) => {
        if (res.code === 0) {
            readNextData.value = res.data.nextNews
            moreWatchData.value = res.data.moreNews
        }
    })
}
defineExpose({
    getNext
});
</script>
<style scoped lang='scss'>
.article__footer {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.article__container {
    display: flex;

    .article__figure {
        width: 300px;
        min-width: 300px;
        margin-right: 10px;
        position: relative;
    }

    .title {
        .label {
            color: #3677a8;
            font-weight: 800;
            font-size: 14px;
            text-transform: none
        }
    }

    .title:before {
        display: none;
    }
}

.header {
    margin-bottom: 0;
}

.article__headline {
    font-weight: 800;
    font-size: 22px;
}

.label--barrons {
    color: #3677a8;
}

.article__summary {
    font-size: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 60px;
    margin-top: 2px;
    color: #2e2e2e;
}

.more-headlines {
    margin-top: 20px;
    margin-bottom: 20px;

    .header {
        margin-bottom: 10px;
        font-size: 18px;
    }

    li {
        margin: 0 0 0.5em 20px;
        list-style-type: disc;
        color: #2e2e2e;
        padding: 0;
        font-weight: bold;
        font-size: 18px;

        .link {
            color: #2e2e2e;
            border-bottom: 2px solid #3677a8;
            font-size: 0.875rem;
        }

        .link:hover {
            background: #eef8ff;
        }
    }
}
</style>